<template>
  <div>
    <a-form
      :model="formData"
      :label-col="formOption?.labelCol || { span: 8 }"
      :wrapper-col="formOption?.wrapperCol || { span: 16 }"
      autocomplete="off"
    >
      <div
        v-for="(module, moduleIndex) in formOption.modules"
        :key="moduleIndex"
      >
        <p>{{ module.title }}</p>
        <div class="module-form-container" v-if="module.fieldList">
          <a-row>
            <a-col :span="12">
              <a-form-item
                v-for="(item, index) in module.fieldList"
                :key="index"
                :label="item.label"
                :name="item.field"
                :rules="item.rules"
              >
                <MyInput
                  v-if="item.component === 'Input'"
                  v-model="formData[item.field]"
                  :item="item"
                />
                <MySelect
                  v-if="item.component === 'Select'"
                  v-model="formData[item.field]"
                  :item="item"
                />
                <MyRadio
                  v-if="item.component === 'Radio'"
                  v-model="formData[item.field]"
                  :item="item"
                />
                <!-- 上传 -->
                <MyUpload
                  v-if="item.component === 'Upload'"
                  v-model="formData[item.field]"
                  :item="item"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </div>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import MyInput from "./modules/MyInput/Index.vue";
import MySelect from "./modules/MySelect/Index.vue";
import MyRadio from "./modules/MyRadio/Index.vue";
import MyUpload from "./modules/MyUpload/Index.vue";
interface fieldList {
  component: string;
  label: string;
  field: string;
  rules?: Array<object>;
  placeholder?: string;
}
interface Module {
  title: string;
  fieldList: fieldList;
}

interface FormOption {
  labelCol?: object;
  wrapperCol?: object;
  modules?: Module;
}

defineProps<{ formOption: FormOption }>();

const formData = ref({});
</script>

<style scoped></style>
